import React, { Component } from 'react';
import { Col, Row, Container } from 'reactstrap';
import GotService from '../../services/gotService';
import Header from '../header';
import RandomChar from '../randomChar';
import CharacterPage from '../CharacterPage/characterPage';
import ItemList from '../itemList';

import "./app.css"
import CharDetails from '../charDetails/charDetails';

export default class App extends Component {

    GotService = new GotService();

    state = {
        showRandomChar: true,
    }

    onToggleRandomChar = () => {
        this.setState((state) => {
            return {
                showRandomChar: !state.showRandomChar
            }

        })
    }

    render() {
        const char = this.state.showRandomChar ? <RandomChar /> : null;

        return (
            <div className="app">
                <div>
                    <Header />
                </div>
                <div>
                    {char}
                    <button
                        onClick={this.onToggleRandomChar}
                        className="toggle-btn">Toggle random character</button>
                </div>
                <div className="group">
                    <CharacterPage />
                    <Row>
                        <Col md='6'>
                            <ItemList
                                onItemSelected={this.onItemSelected}
                                getData={this.GotService.getAllHouses}
                                renderItem={(item) => item.name}
                            />
                        </Col>
                        <Col md='6'>
                            <CharDetails charId={this.state.selectedChar} />
                        </Col>
                    </Row>
                    <Row>
                        <Col md='6'>
                            <ItemList
                                onItemSelected={this.onItemSelected}
                                getData={this.GotService.getAllBooks}
                                renderItem={(item) => item.name}
                            />
                        </Col>
                        <Col md='6'>
                            <CharDetails charId={this.state.selectedChar} />
                        </Col>
                    </Row>
                </div>
            </div >
        );

    }


};

